import { Navigate } from 'react-router-dom';
import React, { Suspense } from 'react';

const Home = React.lazy(() => import('../application/Home'));
const Recommend = React.lazy(() => import('../application/Recommend'));
const Singers = React.lazy(() => import('../application/Singers'));
const Rank = React.lazy(() => import('../application/Rank'));

const routes = [
  {
    path: '/',
    element: <Navigate to='/home' />,
  },
  {
    path: '/home',
    element: (
      <Suspense>
        <Home />
      </Suspense>
    ),
    children: [
      {
        path: '/home',
        element: <Navigate to='/home/recommend' />,
      },
      {
        path: '/home/recommend',
        element: (
          <Suspense>
            <Recommend />
          </Suspense>
        ),
      },
      {
        path: '/home/singers',
        element: (
          <Suspense>
            <Singers />
          </Suspense>
        ),
      },
      {
        path: '/home/rank',
        element: (
          <Suspense>
            <Rank />
          </Suspense>
        ),
      },
    ],
  },
];

export default routes;
